<div id="app" class="bj-imng" v-cloak>
    <div class="flex-row flex-content-center w100">
        <div class="login-main shadow5 flex-column padding-40">
            <div class="flex-row flex-content-center">
                <div>{{config.site.name||"快速开发"}}</div>
            </div>
            <div class="flex-row flex-content-center margin-top-20">
                <div>后端急速框架</div>
            </div>
            <div class="margin-top-40">
                <el-form :model="form" ref="formEl" label-width="auto" :rules="rules" style="max-width: 400px">
                    <el-form-item label="账号" prop="username">
                        <el-input v-model="form.username" placeholder="请输入账号"/>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input type="password" v-model="form.password" placeholder="请输入密码" show-password/>
                    </el-form-item>
                </el-form>
            </div>
            <div class="margin-top-40">
                <el-button class="el-button el-button--primary w100" type="primary" @click="login">登录</el-button>
            </div>

        </div>
    </div>
</div>
<!--<script>-->
<!--    var app = Vue.createApp({-->
<!--        data() {-->
<!--            return {-->
<!--                config:Config,-->
<!--                form:{-->
<!--                    username:"",-->
<!--                    password:""-->
<!--                },-->
<!--                rules:{-->
<!--                    username:[-->
<!--                        { required: true, message: '请输入账户', trigger: 'blur' },-->
<!--                    ],-->
<!--                    password:[-->
<!--                        { required: true, message: '请输入密码', trigger: 'blur' },-->
<!--                    ]-->
<!--                }-->
<!--            }-->
<!--        },-->
<!--        created() {-->
<!--            console.log(this.config)-->
<!--        },-->
<!--        methods:{-->
<!--            login(){-->
<!--                let that = this;-->
<!--                this.$refs.formEl.validate((valid) => {-->
<!--                    if (valid) {-->
<!--                        console.log(that.form)-->
<!--                        let ins = layer.load()-->
<!--                        $.post("login",{row:that.form},function (res){-->
<!--                            layer.close(ins)-->
<!--                            if(res.code==1){-->
<!--                                layer.msg(res.msg,{icon:1,timeout:1500},function (){-->
<!--                                    window.location.href = res.data.url-->
<!--                                })-->
<!--                            }else{-->
<!--                                if(res.msg){-->
<!--                                    layer.msg(res.msg)-->
<!--                                }else{-->
<!--                                    layer.msg("登录失败")-->
<!--                                }-->

<!--                            }-->
<!--                        })-->
<!--                    } else {-->
<!--                        return false;-->
<!--                    }-->
<!--                })-->
<!--            }-->
<!--        }-->
<!--    })-->
<!--    app.use(ElementPlus)-->
<!--    app.mount('#app')-->
<!--</script>-->
<style lang="scss">
    .el-button--primary{
        background-color: #273de3;
        /*--el-color-primary-light-9: rgb(233, 236, 252);*/
        /*--el-color-primary-light-8: rgb(212, 216, 249);*/
        /*--el-color-primary-light-7: rgb(190, 197, 247);*/
        /*--el-color-primary-light-5: rgb(147, 158, 241);*/
        /*--el-color-primary-light-3: rgb(104, 119, 235);*/
        /*--el-color-primary-dark-2: rgb(31, 49, 182);*/
    }
    .login-main{
        width: 400px;
        height: 400px;
        background-color: #FFFFFF;
        box-sizing: border-box;
        margin-top: calc((100vh - 400px)/2);
        border-radius: 20px;
        color: #333333;
        font-weight: 700;
    }
.bj-imng{
    width: 100%;
    height: 100vh;
    background-image: url("/assets/img/bg.gif");
    background-repeat: no-repeat;
    background-size: cover; /* 可选，确保图片覆盖整个背景 */
    background-position: center; /* 可选，确保图片居中显示 */
}
</style>